<template>
	<view class="warp">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 16rpx;box-sizing: border-box;">
			<view style="box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #FFF;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view style="color: #FFF;font-size: 32rpx;font-weight: 500;">
				邀請好友
			</view>
			<view style="">
				<u-image
					src="/static/images/icon/warning-circle-white.svg"
					width="44rpx"
					height="44rpx"
				></u-image>
			</view>
		</view>
		<view style="margin-top: 32rpx;padding: 0 40rpx;">
			<view style="width: 100%;display: flex; justify-content: center;">
				<view style="margin: 0 auto;border-radius: 15px;background: #000;color: #FFF;padding: 8rpx 24rpx;font-size: 24rpx;">
					限時 45 天挑戰
				</view>
			</view>
			<view style="margin-top: 12rpx;">
				<view style="text-align: center;text-shadow: 0 4px 4px rgba(0, 122, 255, 0.32);font-family: 'GenSekiGothic TW';font-size: 38px;font-style: normal;font-weight: 900;line-height: 140%;letter-spacing: 0.76px;color: #FFF;">
					邀請好友
				</view>
				<view style="text-align: center;text-shadow: 0 4px 4px rgba(0, 122, 255, 0.32);font-family: 'GenSekiGothic TW';font-size: 35px;font-style: normal;font-weight: 900;line-height: 140%;letter-spacing: 0.76px;color: #FFF;">
					有機會贏 iPhone 17
				</view>
				<view style="text-align: center;color: #FFF;font-size: 28rpx;margin-top: 16rpx;">
					還有週週小獎，人人都有機會！
				</view>
			</view>
			<view style="width: 100%;margin-top: 84rpx;display: flex;justify-content: space-between;align-items: center;">
				<svg xmlns="http://www.w3.org/2000/svg" width="120" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M5 2.5L0 0.113249V5.88675L5 3.5V2.5ZM119 3.5C119.276 3.5 119.5 3.27614 119.5 3C119.5 2.72386 119.276 2.5 119 2.5V3V3.5ZM4.5 3V3.5H119V3V2.5H4.5V3Z" fill="white"/>
				</svg>
				<view style="color: #FFF;text-shadow: 0 0 4px rgba(0, 122, 255, 0.32);font-size: 32rpx;font-weight: 500;">如何參與</view>
				<svg xmlns="http://www.w3.org/2000/svg" width="120" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M1 2.5C0.723858 2.5 0.5 2.72386 0.5 3C0.5 3.27614 0.723858 3.5 1 3.5V3V2.5ZM115 3.5L120 5.88675V0.113249L115 2.5V3.5ZM1 3V3.5H115.5V3V2.5H1V3Z" fill="white"/>
				</svg>
			</view>
			<view style="margin-top: 32rpx;position: relative;">
				<view style="padding: 64rpx 32rpx;border-radius: 24rpx;background-color: #fff;box-shadow: 0 6.045px 12.09px 0 rgba(0, 122, 255, 0.20);margin: 0 auto;">
					<view style="display: flex;justify-content: flex-start;align-items: flex-start;">
						<view style="z-index: 99;width: 48rpx;height: 48rpx;border-radius: 50%;background-color: #000;color: #FFF;text-align: center;font-size: 28rpx;">1</view>
						<view style="color: #000;margin-left: 24rpx;">
							<view style="font-size: 28rpx;">將您的專屬邀請連結，分享給好友</view>
							<view style="font-size: 24rpx;margin-top: 8rpx;">點擊底部按鈕，一鍵發送</view>
						</view>
					</view>
					<view style="display: flex;justify-content: flex-start;align-items: flex-start;margin-top: 56rpx;">
						<view style="z-index: 99;width: 48rpx;height: 48rpx;border-radius: 50%;background-color: #000;color: #FFF;text-align: center;font-size: 28rpx;">2</view>
						<view style="color: #000;margin-left: 24rpx;">
							<view style="font-size: 28rpx;">好友註冊，完成實名認證</view>
							<view style="font-size: 24rpx;margin-top: 8rpx;">需完成「成為達人」兩步驟審核，算作有效邀請</view>
						</view>
					</view>
					<view style="display: flex;justify-content: flex-start;align-items: flex-start;margin-top: 56rpx;">
						<view style="z-index: 99;width: 48rpx;height: 48rpx;border-radius: 50%;background-color: #000;color: #FFF;text-align: center;font-size: 28rpx;">3</view>
						<view style="color: #000;margin-left: 24rpx;">
							<view style="font-size: 28rpx;">即可累積邀請人數</view>
							<view style="font-size: 24rpx;margin-top: 8rpx;">參加週榜抽獎 & 45 天總榜比賽</view>
						</view>
					</view>
					
					<view style="margin-top: 56rpx;">
						<view style="display: flex;justify-content: center;">
							<view @click="generateQRCode" style="margin-right: 8rpx;display: flex;justify-content: center;align-items: center;background-color: #27C5D6;border-radius: 200rpx;padding: 16rpx 28rpx;">
								<u-image
									src="/static/images/icon/qrcode.svg"
									width="36rpx"
									height="36rpx"
								></u-image>
							</view>
							<view style="margin-left: 8rpx;display: flex;justify-content: center;align-items: center;background-color: #27C5D6;border-radius: 200rpx;padding: 16rpx 150rpx;color: #FFF;">
								邀請好友
							</view>
						</view>
					</view>
					
					<view style=" position: absolute;top: 80rpx;left: 54rpx; ">
						<svg xmlns="http://www.w3.org/2000/svg" width="2" height="138" viewBox="0 0 2 138" fill="none">
							<path d="M1 0V138" stroke="#232426" stroke-dasharray="2 2"/>
						</svg>
					</view>
				</view>
			</view>
			<view style="width: 100%;margin-top: 84rpx;display: flex;justify-content: space-between;align-items: center;">
				<svg xmlns="http://www.w3.org/2000/svg" width="120" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M5 2.5L0 0.113249V5.88675L5 3.5V2.5ZM119 3.5C119.276 3.5 119.5 3.27614 119.5 3C119.5 2.72386 119.276 2.5 119 2.5V3V3.5ZM4.5 3V3.5H119V3V2.5H4.5V3Z" fill="white"/>
				</svg>
				<view style="color: #FFF;text-shadow: 0 0 4px rgba(0, 122, 255, 0.32);font-size: 32rpx;font-weight: 500;">我的數據</view>
				<svg xmlns="http://www.w3.org/2000/svg" width="120" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M1 2.5C0.723858 2.5 0.5 2.72386 0.5 3C0.5 3.27614 0.723858 3.5 1 3.5V3V2.5ZM115 3.5L120 5.88675V0.113249L115 2.5V3.5ZM1 3V3.5H115.5V3V2.5H1V3Z" fill="white"/>
				</svg>
			</view>
			<view style="margin-top: 32rpx;">
				<view style="padding: 40rpx 32rpx;border-radius: 24rpx;background-color: #fff;box-shadow: 0 6.045px 12.09px 0 rgba(0, 122, 255, 0.20);margin: 0 auto;">
					<view style="display: flex;justify-content: space-around;align-items: center;">
						<view style="text-align: center;">
							<view>
								{{invites}}人
							</view>
							<view style="display: flex;justify-content: center;align-items: center;margin-top: 8rpx;">
								<view>已成功邀請</view>
								<view>
									<u-image
										src="/static/images/icon/right-icon-2.png"
										width="36rpx"
										height="36rpx"
									></u-image>
								</view>
							</view>
						</view>
						<view style="width: 16rpx;">
							<svg xmlns="http://www.w3.org/2000/svg" width="1" height="53" viewBox="0 0 1 53" fill="none">
								<path d="M0.5 0V53" stroke="#27C5D6" stroke-dasharray="2 2"/>
							</svg>
						</view>
						<view style="text-align: center;">
							<view>
								{{parking}}名
							</view>
							<view style="display: flex;justify-content: center;align-items: center;margin-top: 8rpx;">
								<view>已成功邀請</view>
								<view>
									<u-image
										src="/static/images/icon/right-icon-2.png"
										width="36rpx"
										height="36rpx"
									></u-image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;margin-top: 84rpx;display: flex;justify-content: space-between;align-items: center;">
				<svg xmlns="http://www.w3.org/2000/svg" width="75" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M5 2.5L0 0.113249V5.88675L5 3.5V2.5ZM119 3.5C119.276 3.5 119.5 3.27614 119.5 3C119.5 2.72386 119.276 2.5 119 2.5V3V3.5ZM4.5 3V3.5H119V3V2.5H4.5V3Z" fill="white"/>
				</svg>
				<view style="color: #FFF;text-shadow: 0 0 4px rgba(0, 122, 255, 0.32);font-size: 32rpx;font-weight: 500;">活動獎品＆目前戰績</view>
				<svg xmlns="http://www.w3.org/2000/svg" width="75" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M1 2.5C0.723858 2.5 0.5 2.72386 0.5 3C0.5 3.27614 0.723858 3.5 1 3.5V3V2.5ZM115 3.5L120 5.88675V0.113249L115 2.5V3.5ZM1 3V3.5H115.5V3V2.5H1V3Z" fill="white"/>
				</svg>
			</view>
			<view style="margin-top: 32rpx;">
				<view style="padding: 40rpx 32rpx;border-radius: 24rpx;background-color: #fff;box-shadow: 0 6.045px 12.09px 0 rgba(0, 122, 255, 0.20);margin: 0 auto;">
					<view style="width: 100%;">
						<view style="color: #020202;font-size: 32rpx;font-weight: 500;text-align: center;">第一名</view>
						<view style="margin: 16rpx auto;display: block;width: 200rpx;">
							<u-image
								src="/static/images/icon/images/image_1.png"
								width="200rpx"
							></u-image>
						</view>
						<view style="color: #6A707C;font-size: 24rpx;text-align: center;">
							iPhone 17 256GB
						</view>
					</view>
					<view style="width: 100%;margin-top: 32rpx;position: relative;">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view style="padding: 12rpx 0;">
								<view style="color: #020202;font-size: 32rpx;font-weight: 500;text-align: center;">
									第二名
								</view>
								<view style="margin: 16rpx auto;display: block;width: 200rpx;">
									<u-image
										src="/static/images/icon/images/image_2.png"
										width="200rpx"
									></u-image>
								</view>
								<view style="color: #6A707C;font-size: 24rpx;text-align: center;">
									$1,000 禮卷
								</view>
							</view>
							<view style="padding: 12rpx 0;">
								<view style="color: #020202;font-size: 32rpx;font-weight: 500;text-align: center;">
									第三名
								</view>
								<view style="margin: 16rpx auto;display: block;width: 200rpx;">
									<u-image
										src="/static/images/icon/images/image_4.png"
										width="200rpx"
									></u-image>
								</view>
								<view style="color: #6A707C;font-size: 24rpx;text-align: center;">
									$500 禮卷
								</view>
							</view>
							<view style="background-color: #E8EFFF;border-radius: 26rpx;padding: 12rpx 0;">
								<view style="color: #020202;font-size: 32rpx;font-weight: 500;text-align: center;">
									週週抽
								</view>
								<view style="margin: 16rpx auto;display: block;width: 200rpx;">
									<u-image
										src="/static/images/icon/images/image_3.png"
										width="200rpx"
									></u-image>
								</view>
								<view style="color: #6A707C;font-size: 24rpx;text-align: center;">
									$100 禮卷
								</view>
								<view style="background-color: #020202;color: #FFF;border-radius: 50%;text-align: center;width: 48rpx;height: 48rpx;font-size: 26rpx;position: absolute;top: 240rpx;right: 30rpx; ">
									X3
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<view style="margin-top: 32rpx;">
				<view style="padding: 40rpx 32rpx;border-radius: 24rpx;background-color: rgba(255, 255, 255, 0.3);box-shadow: 0 6.045px 12.09px 0 rgba(0, 122, 255, 0.20);border:2rpx solid #FFF;">
					<view style="color: #FFF;display: flex;justify-content: space-between;">
						<view style="font-size: 32rpx;font-weight: 500;">目前總榜戰績</view>
						<view style="font-size: 24rpx;">{{exptime}} 截止</view>
					</view>
					<view>
						<view v-for="(item, index) in parkingList" :key="index">
							<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 40rpx; ">
								<view style="display: flex;justify-content: flex-start;align-items: center;">
									<view>
										<u-image
											:src="`/static/images/icon/champion_${index}.svg`"
											width="64rpx"
											height="64rpx"
										></u-image>
									</view>
									<view style="margin-left: 20rpx;">
										<u-avatar
											size="64"
											:src="item.avatar"
										></u-avatar>
									</view>
									<view style="color: #FFF;font-size: 28rpx;margin-left: 20rpx;">
										{{item.nickname}}
									</view>
								</view>
								<view>
									<view style="color: #FFF;font-size: 28rpx;margin-left: 20rpx;">
										邀請{{item.invites}}人
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;margin-top: 84rpx;display: flex;justify-content: space-between;align-items: center;">
				<svg xmlns="http://www.w3.org/2000/svg" width="90" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M5 2.5L0 0.113249V5.88675L5 3.5V2.5ZM119 3.5C119.276 3.5 119.5 3.27614 119.5 3C119.5 2.72386 119.276 2.5 119 2.5V3V3.5ZM4.5 3V3.5H119V3V2.5H4.5V3Z" fill="white"/>
				</svg>
				<view style="color: #FFF;text-shadow: 0 0 4px rgba(0, 122, 255, 0.32);font-size: 32rpx;font-weight: 500;">小組長團體挑戰</view>
				<svg xmlns="http://www.w3.org/2000/svg" width="90" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M1 2.5C0.723858 2.5 0.5 2.72386 0.5 3C0.5 3.27614 0.723858 3.5 1 3.5V3V2.5ZM115 3.5L120 5.88675V0.113249L115 2.5V3.5ZM1 3V3.5H115.5V3V2.5H1V3Z" fill="white"/>
				</svg>
			</view>
			<view style="margin-top: 32rpx;">
				<view style="padding: 40rpx 32rpx;border-radius: 24rpx;background-color: #fff;box-shadow: 0 6.045px 12.09px 0 rgba(0, 122, 255, 0.20);margin: 0 auto;">
					<view style="text-align: center;">
						<view style="margin: 0 auto;display: block;width: 56rpx;">
							<u-image
								src="/static/images/icon/task_gold.svg"
								width="56rpx"
								height="56rpx"
							></u-image>
						</view>
						<view style="margin-top: 24rpx;font-size: 32rpx;color: #020202;font-weight: 500;">想挑戰更高獎金？參加獎金池賽</view>
						<view style="margin-top: 24rpx;font-size: 24rpx;color: #6A707C;">獎金池持續增加，目前金額：NT$20,000</view>
						<view style="margin-top: 24rpx;background-color: #27C5D6;color: #FFF;font-size: 32rpx;padding: 24rpx 100rpx;border-radius: 100rpx;">
							參加獎金池比賽
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 84rpx;">
				<view style="color: #FFF;font-size: 24rpx;">注意事項</view>
				<view class="rich-text">
					<u-parse :content="richText" :tagStyle="style"></u-parse>
				</view>
			</view>
		</view>
		
		<u-popup :show="showQrcode" @close="closeQrcode" @open="openQrcode" mode="center" :round="40">
			<view style="width: 500rpx;position: relative;">
				<view style="position: absolute;top: -80rpx;left: 50%;transform: translateX(-50%);z-index: 1000;padding: 8rpx;background-color: #FFF;border-radius: 50%;">
					<u-image
						:src="userInfo.avatar" 
						shape="circle" 
						width="156"
						height="156"
					></u-image>
				</view>
				<view style="margin-top: 100rpx;">
					<view style="display: flex;justify-content: center;align-items: center;font-size: 36rpx;font-weight: 500;">{{userInfo.nickname}}</view>
					<view style="display: flex;justify-content: center;align-items: center;font-size: 24rpx;margin-top: 8rpx;color: #6A707C;">ORID:{{userInfo.orid}}</view>
				</view>
				<view style="display: flex;justify-content: center;margin-top: 38rpx;">
					<canvas id="qrcode" canvas-id="qrcode" style="width: 180px;height: 180px;"></canvas>
				</view>
				<view style="display: flex;justify-content: center;color: #6A707C;margin-top: 46rpx;font-size: 24rpx;">
					請好友掃一掃上方 QR-code注冊
				</view>
				<view style="display: flex;justify-content: center;margin: 26rpx 0;">
					
					<view style="background-color: #27C5D6;border-radius: 48rpx;padding: 10rpx 38rpx;display: flex;justify-content: center;align-items: center;">
						<u-image
							src="/static/images/icon/download_white.png"
							width="32"
							height="32"
						></u-image>
						<view style="color: #FFF;font-size: 24rpx;">
							保存至相簿
						</view>
					</view>
				</view>
			</view>
			
		</u-popup>
		
	</view>
</template>

<script>

import uQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	
export default {
	
	data(){
		return{
			invites:0,
			parking:0,
			exptime:'2025/12/25 23:59',
			parkingList:[
				{
					id:1,
					nickname:'May',
					avatar:'http://social.com/uploads/20250911/d1c050624e0a84a1db1acfcec32c6b9a.png',
					invites:'2,225'
				},
				{
					id:2,
					nickname:'晴天老師',
					avatar:'http://social.com/uploads/20250911/d1c050624e0a84a1db1acfcec32c6b9a.png',
					invites:'1,399'
				},
				{
					id:3,
					nickname:'Sophie',
					avatar:'http://social.com/uploads/20250911/d1c050624e0a84a1db1acfcec32c6b9a.png',
					invites:'225'
				}
			],
			richText:`<div>
						<ul>
							<li>每位好友僅能被計算一次，重複邀請或使用虛假帳號不計入。</li>
							<li>被邀請人需完成實名認證與技能發佈，方算有效邀請。</li>
							<li>排行榜每日凌晨更新，僅供參考。</li>
							<li>最終得獎名單以系統結算為準。</li>
							<li>獎品明細
							<ul>
								<li>週榜（每 7 天）</li>
								<ul>
									<li>NT$100 超商禮券</li>
								</ul>
								<li>總榜（45 天）</li>
								<ul>
									<li>總累積第一名：iPhone 17 256GB 霧藍色 乙台</li>
									<li>總累積第二名：NT$1,000 超商禮券 乙張</li>
									<li>總累積第三名：NT$500 超商禮券 乙張</li>
								</ul>
							</ul>
							<li>獎品發放</li>
							<ul>
								<li>週榜獎品將於公布後 7 個工作日內發送；</li>
								<li>總榜獎品將於公布後 14 個工作日內寄出 / 發放。</li>
								<li>獎品不得兌換現金或轉讓，若因用戶資訊錯誤導致無法發放，平台不再補寄。</li>
							</ul>
							<li>若發現作弊、灌水、利用非正當方式邀請，平台有權取消資格。</li>
							<li>平台保留活動最終解釋與修改權，如異動將公告於 App 內</li>
							<li>本活動由 煦澄科技股份有限公司主辦。若依中華民國稅法規定需開立扣繳憑單，得獎者需配合提供身份資料。</li>
						</ul>
						</div>`,
			style:{
				// 字符串的形式
				ul:"padding-left: 8px;list-style-position: inside;",
				li: "color: #fff;font-size:24rpx;padding-left: 8rpx;list-style-position: inside;"
			},
			userInfo:{},
			qrText: 'https://www.example.com',
			showQrcode:false
		}
	},
	onLoad(option) {
		this.getUserInfo();
	},
	methods:{
		getUserInfo(){
			this.userInfo = uni.getStorageSync('userInfo');
			console.log(this.userInfo)
		},
		goBack(){
			uni.navigateBack()
		},
		generateQRCode() {
		    this.showQrcode = true;
			uni.showLoading({
				'icon':'none',
				'title':'Qrcode加載中'
			})
			
			setTimeout(()=>{
				var qr = new uQRCode();
				// 设置二维码内容
				qr.data = "https://h5.onlyrent.tw/code="+this.userInfo.orid;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 180;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置***实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
				uni.hideLoading();
			}, 1000)
		},
		saveToAlbum(filePath) {
		    uni.saveImageToPhotosAlbum({
		        filePath: filePath,
		        success: () => {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
		        },
		        fail: (err) => {
					console.error('保存失败:', err)
		        }
		    })
		},
		openQrcode(){
			this.showQrcode = true;
		},
		closeQrcode(){
			this.showQrcode = false;
		}
	}
}
</script>

<style lang="scss" scoped>
	.warp{
		width: 100%;
		background: linear-gradient(0deg, #9385F7 10.96%, #4A50EF 57.62%, #B3ADFF 100%);
		box-sizing: border-box;
		padding-bottom: 64rpx;
		
		.rich-text{
			li{
				color: #fff !important ;
			}
		}
	}
</style>